<template>
	<view class="tickets-list-page--screen">
      <basic-bubble-popover 
        label="综合排序"
        icon="icon-caret"
        :showButton="false" 
        ref="sortPopover"    
      >
        <view slot="content">
          <radio-group @change="changeSort">
                <label v-for="item in sortList" :key="item.value" class="radio--wrap">
                    <view class="label" :class="{active: item.value == sortParams.sortType}">{{item.label}}</view>
                    <view class="icon">
                        <radio color="#00CBD6" :value="item.value" :checked="item.value == sortParams.sortType" />
                    </view>
                </label>
            </radio-group>         
        </view>
      </basic-bubble-popover>
      <basic-bubble-popover 
        label="筛选"
        icon="icon-caret"
        @submit="submitSort" 
        @cancel="cancelPrceDate"
        :textColor="[1,2].findIndex(sort=>sort === Number(sortParams.bookingDateType))>-1||sortParams.minimumPrice||sortParams.maximumPrice ? '#54DAE2':'#1B2431'"
      >
        <view slot="content">
          <view class="filter--wrap">
            <view class="title">价格区间</view>
            <view class="input--inner">
              <minMaxInput 
                @minBlur="handleMinPrice" 
                @maxBlur="handleMaxPrice" 
                :minValue="sortParams.minimumPrice | minMaxPrice" 
                :maxValue="sortParams.maximumPrice | minMaxPrice" 
              />
            </view>
            <view class="title">预订时限</view>
            <view class="radio--inner">
              <view class="radio" @tap="changeBookingDate(item)" :class="{checked: item.value == sortParams.bookingDateType}" v-for="item in bookingDate" :key="item.value">
                <text class="icon" :class="{checked: item.value == sortParams.bookingDateType}"></text><text>{{item.label}}</text>
              </view>
            </view>
          </view>         
        </view>
      </basic-bubble-popover>
      
      <basic-bubble-popover 
        label="离我最近"
        icon="icon72beifen"
        showCustomPopup
        @handleClick="distanceSort"
        :textColor="sortParams.sortType == 4 ? '#54DAE2':'#1B2431'"
      >
      </basic-bubble-popover>

      <!-- 定位弹窗提示 -->
      <uni-popup ref="distancePopup" type="center" >
        <view class="position-dialog--wrap">
          <view>
            <image class="image" src="/static/position.png">             
          </view>
          <view class="title">定位数据获取失败</view> 
          <view class="title">请检查定位服务是否已经开启</view> 
          <view class="btn" @click="clodeDistancePopup">确定</view> 
        </view>
      </uni-popup>
    </view>
</template>
<script>
import sdk from "sdk"
import { minMaxPriceInput } from 'utils/helper/price'
import minMaxInput from '@/components/business/min-max-input'
import storage from 'utils/helper/storage'
import city from '@/mixins/city'
export default {
  components: { minMaxInput },
  props:{
    params:{ type:Object, default:()=>{} }
  },
  mixins:[city],
	data(){
		return {			
			sortList: [
				{ label: '默认排序', value: '0' },
				{ label: '价格由低至高', value: '2' },
				{ label: '价格由高至低', value: '3' }
			],
      bookingDate:[
        { label: '不限', value: '0'},
        { label: '可订今日', value: '1'},
        { label: '可订明日', value: '2' }
      ],
      oldSortType: null,
      sortParams: {    
        "bookingDateType": 0,
        "maximumPrice": null,
        "minimumPrice": null,
        "sortType": 0,
        "starLevel": null
      },
      tempParams: null, // 临时城市定位信息
		}
  },
	methods: {
		changeSort(evt) {
      this.sortParams.sortType = parseInt(evt.target.value) 
      this.$emit('submit', this.sortParams)
      this.$refs.sortPopover.show = false
    },
    changeBookingDate(item) {    
       this.sortParams.bookingDateType = parseInt(item.value) 
    },
    submitSort() {
      if( (this.sortParams.minimumPrice != null && this.sortParams.maximumPrice != null) && this.sortParams.minimumPrice > this.sortParams.maximumPrice ) {
        const max = this.sortParams.minimumPrice
        this.sortParams.minimumPrice = this.sortParams.maximumPrice
        this.sortParams.maximumPrice = max
      }
      this.$emit('submit', this.sortParams)
    },
    cancelSort() {
      this.sortParams.sortType = 0
      this.$emit('submit', this.sortParams)
    },
    cancelPrceDate() {// 重置价格和预订日期
      this.sortParams = { ...this.sortParams, bookingDateType: 0, maximumPrice: null, minimumPrice: null }
      this.$emit('submit', this.sortParams)
    },
    distanceSort(){
      // 获取当前定位
      this.$city_getLocation().then(res => {        
          // 缓存当前定位城市
          storage.set('__region_city__', {
            regionId: res.regionId,
            name: res.city,
            lat: res.latitude,
            lon: res.longitude
          })
          let sortType = null
          if(Number(this.sortParams.sortType) === 4) {
            sortType = this.oldSortType
          } else {
            this.oldSortType = Number(this.sortParams.sortType)
            sortType = 4
          }
          this.sortParams = { ...this.sortParams, sortType }
          this.$emit('submit', this.sortParams)
				}).catch(err => {
            this.$refs.distancePopup.open()
				})        
    },
    
    clodeDistancePopup() {
      this.$refs.distancePopup.close()
    },
    handleMinPrice(e) {
      this.sortParams.minimumPrice = minMaxPriceInput(e.detail.value)
    },
    handleMaxPrice(e) {
      this.sortParams.maximumPrice = minMaxPriceInput(e.detail.value)
    }
	}
}
</script>
<style lang="less">
  .tickets-list-page--screen{
    padding:0 0 20rpx;
    display: flex;
    .radio--wrap{
      color: @font_color;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
      line-height: 80rpx;
      margin-right:-6rpx;
      /deep/ .uni-radio-input{
        margin-right:0;
      }
      .label{
        &.active{
          font-weight: 600;
        }
      }
      .icon{
        transform: scale(0.7);
      }
    }
    .filter--wrap{
      .title{
        font-size: 28rpx;
        margin: 32rpx 0 16rpx 0;
        font-weight: 600;
      }
      .input--inner{
      }  
      .radio--inner{
        display: flex;
        font-size: 28rpx;
        .radio{
          margin-right: 50rpx;
          display:flex;
          align-items: center; 
          &.checked{
            color: @theme_color;
          }                   
        }
        .icon{
          margin-right: 8rpx;
          display: inline-block;
          width: 24rpx;
          height: 24rpx;
          border-radius: 24rpx;
          border: 1px solid #E4EBF4;
          &.checked{
            display: inline-block;
            width: 24rpx;
            height: 24rpx;
            border-radius: 24rpx;
            border: 1px solid @theme_color;
            position: relative;
            &::after{
              content: '';
              width: 14rpx;
              height: 14rpx;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              border-radius: 10rpx;
              background: @theme_color;
              position: absolute;
            }
          }
        }
      }    
    }
    .screen--title{
      font-size: 24rpx;
      color: @font_color;
      position: relative;
      display: inline-block;
      padding-right:10rpx;
    }
    .position-dialog--wrap{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      border-radius:16rpx;
      background: #fff;
      & > view{
        margin-bottom: 30rpx;
      }
      .image{
        width: 520rpx;
        height: 376rpx;
      }
      .title{
        font-size: 28rpx;
      }
      .btn{
        width: 380rpx;
        height: 64rpx;
        background: @theme_color;
        border-radius: 39rpx;
        color: #fff;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .cancel{
        font-size: 24rpx;
        color: #8A95AC;
      }
    }
  }
</style>


